<!DOCTYPE html>
<html lang="zh-TW" class="transition-all duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>貓名 - 關於</title>
  <script src="https://cdn.tailwindcss.com"></script> 
  <style>
    body {
      font-family: 'Microsoft JhengHei', sans-serif;
    }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md mx-auto px-4">
    <header class="mb-6 px-4">
      <nav class="bg-white/80 backdrop-blur-lg rounded-xl shadow-lg p-4 border border-gray-200 dark:border-gray-700 dark:bg-gray-800/80">
        <div class="flex justify-between items-center">
          <a href="./" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600">貓名</a>
          <div class="flex items-center space-x-4">
            <button onclick="toggleDarkMode()" class="p-2 rounded-full bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-200 hover:scale-110 transition-transform">🌙</button>
            <button onclick="toggleMobileMenu()" class="md:hidden text-gray-600 dark:text-gray-300">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
            </button>
          </div>
        </div>
        <!-- 桌面菜单 -->
        <ul class="hidden md:flex space-x-6 mt-4">
          <li><a href="../zh-tw/" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首頁</a></li>
          <li class="relative group">
            <span class="cursor-pointer text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">語言</span>
            <ul class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg py-2 w-40 mt-2 z-20 dark:bg-gray-800">
              <li><a href="../zh-cn/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
              <li><a href="../zh-tw/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
              <li><a href="../en/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
            </ul>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">項目地址</a></li>
          <li><a href="#" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">關於</a></li>
        </ul>
        <!-- 移动端菜单 -->
        <ul id="mobile-menu" class="hidden mt-4 space-y-2 bg-gray-50/80 backdrop-blur-sm rounded-xl p-4 shadow-inner dark:bg-gray-800/50">
          <li><a href="../zh-tw/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首頁</a></li>
          <li>
            <details class="group">
              <summary class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400 flex justify-between items-center">
                <span>語言</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-open:rotate-180 transition-transform">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </summary>
              <ul class="ml-4 mt-2 space-y-1">
                <li><a href="../zh-cn/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
                <li><a href="../zh-tw/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
                <li><a href="../en/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
              </ul>
            </details>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">項目地址</a></li>
          <li><a href="#" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">關於</a></li>
        </ul>
      </nav>
    </header>

    <!-- 内容区域 -->
    <main class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-6 dark:bg-gray-800/80">
      <h1 class="text-2xl font-bold mb-4">關於</h1>
      <p class="mb-4">
        一個基於艾琳 · 亨特所著《貓戰士》系列小說的族群貓名產生器。此專案最初開源：https://github.com/nminnow/warriors-name-generator，後由  Qinshihuang233 更新並維護。
      </p>
      <p class="mb-4">
        數據來源：<a href="https://crystalpool.cxuesong.com/"  class="text-blue-500 hover:underline">水晶池</a>，本頁面最後更新時間：<span id="lastUpdated"></span>
      </p>
      <p>
        當前版本託管於：<a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" class="text-blue-500 hover:underline">GitLab 項目地址</a>
      </p>
    </main>

    <!-- 底部版权 -->
    <footer class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>© 2025 貓名 - 開源貓戰士起名器</p>
    </footer>
  </div>

  <!-- JS 功能 -->
  <script>
    function toggleDarkMode() {
      const isDark = !document.documentElement.classList.contains('dark');
      document.documentElement.classList.toggle('dark', isDark);
      localStorage.setItem('darkMode', isDark);
    }

    function toggleMobileMenu() {
      const menu = document.getElementById("mobile-menu");
      menu.classList.toggle("hidden");
    }

    // 最后更新时间
    document.addEventListener('DOMContentLoaded', () => {
      const lastUpdated = new Date(document.lastModified).toLocaleString();
      document.getElementById('lastUpdated').textContent = lastUpdated;

      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
      document.documentElement.classList.toggle('dark', savedDarkMode);
    });
  </script>
</body>
</html>